<template>
  <view class="page custom-page">
    <custom-head gradient back title="发放宝箱"></custom-head>

    <view class="content">
      <view v-for="(item) in stockRecordingList" class="stockItem">

        <view class="item flex">
          <view class="left">
            <image class="img" :src="item.avatar" mode="widthFix"/>
          </view>

          <view class="right">
            <view class="right_top flex">
              <view class="flex">
                <!-- <image class="img" src="../../static/img/avatar.png" mode="widthFix"/> -->
                <image class="img" :src="item.students_avatar" mode="widthFix"/>
                <view class="name">{{ item.name }}</view>
              </view>

              <view class="blue">+ {{ item.points }} /积分</view>
            </view>

            <view class="flex right_buttom">
              <view class="text_1">{{ item.desc }}</view>
              <view class="right_icon">
                <u-icon class="icon" name="clock" color="#8F9399" size="32"></u-icon>
                <view> {{ item.created_at }}</view>
              </view>
            </view>
          </view>
        </view>

      </view>
    </view>

  </view>
</template>
<script>

import { getTreasure } from '../../api/modules/treasure';
import dayjs from 'dayjs';

export default {
  data() {
    return {
      stockRecordingList: [
        {
          type: '',
          count: 2000,
          time: '12/10 12:00:23'
        },
        {
          type: '',
          count: 2000,
          time: '12/10 12:00:23'
        },
        {
          type: '',
          count: 2000,
          time: '12/10 12:00:23'
        },
      ],
      static_uri: getApp().globalData.glb_list.config.static_uri, // 获取全局配置文件
    }
  },


  mounted() {
    this._getTreasure({page_no: 1, page_size: 10000});
  },

  methods: {
   _getTreasure(params) {
     getTreasure(params).then(res => {
      const { code, data } = res || {};
      if (code == 200) {
        let students = this.glbSchool.students; // 全局的学生
        let treasureList = data.list.map(i => ({...i, avatar: `${this.static_uri}${i.avatar}`, created_at: dayjs(i.created_at).format('MM/DD HH:mm:ss')   })).filter(i => i.sid === this.glbId)

        for(let i=0; i<treasureList.length; i++) {
          for(let j=0; j<students.length; j++) {
            if (treasureList[i].id === students[j].id) {
              treasureList[i].students_avatar = students[j].avatar
            }
          }
        }
        this.stockRecordingList = treasureList;
        // console.log('--', treasureList)
        // console.log('全局学生', students)
      }
    })
   },
  }
}
</script>
<style scoped lang="scss">
.page {
  height: 100vh;
}
.content {
  padding: 20rpx;
  .stockItem {
    .item {
      width: 100%;
      height: 210rpx;
      background-color: #fff;
      padding: 37rpx 29rpx 37rpx 25rpx;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      .left {
        .img {
          width: 136rpx;
          height: 136rpx;
          border-radius: 20rpx;
          margin-right: 23rpx;
        }
      }

      .flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .right {
        width: 100%;
        margin-top: 8rpx;
        .right_top {
          .img {
            width: 60rpx !important;
            height: 60rpx !important;
            border-radius: 50%;
            margin-right: 16rpx;
          }
          .name {
            width: 220rpx;
            font-size: 32rpx;
            font-weight: 700;
            text-overflow:ellipsis;/*省略号 */
            white-space:nowrap;/*溢出时不换行 */
            overflow:hidden;/*溢出时隐藏 */
          }
          .blue {
            color: #2979FF;
            font-size: 28rpx;
            font-weight: 700;
          }
        }
        .right_buttom{
          margin-top: 15rpx;
          .text_1 {
            width: 240rpx;
            font-size: 28rpx;
            text-overflow:ellipsis;/*省略号 */
            white-space:nowrap;/*溢出时不换行 */
            overflow:hidden;/*溢出时隐藏 */
          }
          .right_icon {
            display: flex;
            font-size: 24rpx;
            .icon {
              margin-right: 10rpx;
            }
          }
        }
      }
    }
  }
}
</style>
